import { useCallback, memo } from "react"
import styled from "@emotion/styled"
import { useModalSlideUp } from "@/features/useModal"
import ModalSlideUp from "@/components/composite/ModalSlideUp/main"
import RechargeAccountDefault from "./AddAccounts"
import { SvgComponent } from "@/components/base/Svg"
import { WalletAccountType } from "@/features/business/WithdrawAccounts/useGetAccounts"
import { ChannelType } from "@/features/business/WithdrawAccounts/useGetFinanceChannelList"
import RenderIcon from "./RenderIcon"

const Container = styled.div`
    width: 375rem;
    height: 512rem;
    max-height: 600rem;
    position: relative;
    border-top-left-radius: 12rem;
    border-top-right-radius: 12rem;
    background: linear-gradient(90deg, #00cc88 0%, #6cedad 75%, #65efbc 100%);
`

const ContainerTitle = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 18rem;
    letter-spacing: 0%;
    text-align: center;
    padding: 16rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-items: start;
    & > p {
        display: flex;
        flex-direction: column;
        align-items: start;
        margin: 0;
        padding: 0;
        span:nth-of-type(1) {
            font-size: 18rem;
            font-weight: 500;
            line-height: 24rem;
            color: #fffffff2;
            span {
                background: linear-gradient(
                    180deg,
                    rgba(250, 255, 170, 0.95) 0%,
                    rgba(248, 255, 136, 0.95) 100%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
        span:nth-of-type(2) {
            font-size: 12rem;
            font-weight: 400;
            line-height: 16rem;
            color: #ffffff;
        }
    }
    & > img {
        width: 72rem;
        height: 72rem;
    }
`

const ContainerContent = styled.div`
    width: 100%;
    height: 100%;
    padding: 16rem;
    position: relative;
    top: -38rem;
    border-top-left-radius: 12rem;
    border-top-right-radius: 12rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, #ffffff 8%, #ffffff 100%);
    backdrop-filter: blur(200px);
`
const ContentTitle = styled.div`
    width: 100%;
    font-weight: 700;
    font-size: 14rem;
    line-height: 20rem;
    margin-top: 12rem;
`
const ContentCard = styled.div`
    width: 343rem;
    height: 48rem;
    border-radius: 8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f2f3f5;
    margin-top: 8rem;
    padding: 0 12rem;
    font-size: 16rem;
    font-weight: 400;
    & > img {
        width: 24rem;
        height: 24rem;
    }
`
const CardLeftInfo = styled.div`
    display: flex;
    align-items: center;
    gap: 12rem;
    & > img {
        width: 24rem;
        height: 24rem;
        border-radius: 50%;
        margin-right: 12rem;
    }
`
const AccountTypeHead = styled(SvgComponent("pages/UserCenterPage/withdraw/account_type_head.svg"))`
    width: 72rem;
    height: 72rem;
`
const RightArrow = styled(SvgComponent("pages/UserCenterPage/right_arrow1.svg"))`
    width: 24rem;
    height: 24rem;
`

const Exists = styled.div`
    font-size: 14rem;
    color: #9fa7bc;
`

const AccountName = styled.div<{ isExists: boolean }>`
    font-size: 16rem;
    color: ${(props) => (props.isExists ? "#131416" : "#9fa7bc")};
`

const Log = styled.div`
    width: 24rem;
    height: 24rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #fff;
`

type ActionType = "add" | "select" | "edit"

type IProps = {
    actionType?: ActionType
    onClose?: () => void
    accounts?: WalletAccountType[]
    channels?: ChannelType[]
}

function SelectAccountType({ actionType = "add", onClose, accounts, channels = [] }: IProps) {
    const { close: closeModal } = useModalSlideUp("account-page")
    const { open: openModal } = useModalSlideUp("select")

    const existingAccount = useCallback(
        (channelName?: string) => {
            if (!accounts) return true
            const enabledAccount = accounts.find(
                (account) => account.status === 1 && account.channel_name === channelName,
            )
            return !enabledAccount
        },
        [accounts],
    )

    const onAction = useCallback(
        (channelName?: string) => {
            if (actionType === "select") {
                closeModal()
            } else {
                if (!existingAccount(channelName)) {
                    return
                }
                openModal(
                    <RechargeAccountDefault
                        onClose={onClose}
                        channelName={channelName || ""}
                    />,
                    {
                        closeOnClickMask: false,
                        closeOnEscape: false,
                    },
                )
            }
        },
        // eslint-disable-next-line react-hooks/exhaustive-deps
        [actionType, closeModal, openModal],
    )

    const eWallets = channels.filter((item) => item.flag === 1)
    const banks = channels.filter((item) => item.flag === 2)

    return (
        <>
            <Container>
                <ContainerTitle>
                    <p>
                        <span>
                            <span>Select</span> Account Type
                        </span>
                        <span>Select the type of account you want to add</span>
                    </p>
                    <AccountTypeHead />
                </ContainerTitle>
                <ContainerContent>
                    {eWallets?.length > 0 && (
                        <>
                            <ContentTitle>Payment Instruments</ContentTitle>
                            {eWallets?.map((item, index) => (
                                <ContentCard
                                    key={index}
                                    onClick={() => onAction(item.name)}
                                >
                                    <CardLeftInfo>
                                        <Log>
                                            <RenderIcon icon={item.img} />
                                        </Log>
                                        <AccountName isExists={existingAccount(item.name)}>
                                            {item.name}
                                        </AccountName>
                                    </CardLeftInfo>
                                    {existingAccount(item.name) ? (
                                        <RightArrow />
                                    ) : (
                                        <Exists>Exists</Exists>
                                    )}
                                </ContentCard>
                            ))}
                        </>
                    )}
                    {banks?.length > 0 && (
                        <>
                            <ContentTitle>Bank</ContentTitle>
                            {banks.map((item, index) => (
                                <ContentCard
                                    key={index}
                                    onClick={() => onAction(item.name)}
                                >
                                    <CardLeftInfo>
                                        <Log>
                                            <RenderIcon icon={item.img} />
                                        </Log>
                                        <AccountName isExists={existingAccount(item.name)}>
                                            {item.name}
                                        </AccountName>
                                    </CardLeftInfo>
                                    {existingAccount(item.name) ? (
                                        <RightArrow />
                                    ) : (
                                        <Exists>Exists</Exists>
                                    )}
                                </ContentCard>
                            ))}
                        </>
                    )}
                </ContainerContent>
            </Container>
            <ModalSlideUp familyName="select" />
        </>
    )
}

export default memo(SelectAccountType)
